import React, { Component } from 'react'
import PropType from 'prop-types'
import './index.css'

export default class index extends Component {
    
    static propTypes={
        addListItem:PropType.func.isRequired
    }

    /**
     * @description: 监听键盘按下事件
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    handleKeyUp=(event)=>{
        const {target,keyCode}=event
        //判断是否按得是回车键
        if (keyCode!==13) return
        //判断用户有没有输入值
        if (target.value.trim()==='') {
            alert("您输入的值不能为空，请重新输入!")
            return
        }
        //将用户输入的值传递过去
        this.props.addListItem(target.value)
        //将用户输入的值清空
        target.value=""
    }

    render() {
        return (           
            <header>
                <input type="text" onKeyUp={this.handleKeyUp} placeholder="请输入你的任务名称，按回车键确认"/>
            </header>     
        )
    }
}
